<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>跟随鼠标移动（大图展示）</title>
    <style type="text/css">
    html,
    body {
        overflow: hidden;
    }
    
    body,
    div,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    #box ul {
        width: 768px;
        height: 172px;
        list-style-type: none;
        margin: 10px auto;
    }
    
    #box li {
        float: left;
        width: 170px;
        height: 170px;
        cursor: pointer;
        display: inline;
        border: 1px solid #ddd;
        margin: 0 10px;
    }
    
    #box li.active {
        border: 1px solid #a10000;
    }
    
    #box li img {
        width: 170px;
        height: 170px;
        vertical-align: top;
    }
    
    #big {
        position: absolute;
        width: 400px;
        height: 400px;
        border: 2px solid #ddd;
        display: none;
    }
    
    #big div {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
        opacity: 0.5;
        filter: alpha(opacity=50);
        background: #fff url(../../../src/images/loading.gif) 50% 50% no-repeat;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var aLi = document.getElementsByTagName("li");
        var oBig = document.getElementById("big");
        var oLoading = oBig.getElementsByTagName("div")[0];
        var i = 0;

        for (i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            //鼠标划过, 预加载图片插入容器并显示
            aLi[i].onmouseover = function() {
                var oImg = document.createElement("img");
                //图片预加载
                var img = new Image();
                img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg", "_big.jpg");
                //插入大图片
                oBig.appendChild(oImg);
                //鼠标移过样式
                this.className = "active";
                //显示big
                oBig.style.display = oLoading.style.display = "block";
                //判断大图是否加载成功
                img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {
                    oLoading.style.display = "none";
                })
            };
            //鼠标移动, 大图容器跟随鼠标移动
            aLi[i].onmousemove = function(event) {
                var event = event || window.event;
                var iWidth = document.documentElement.offsetWidth - event.clientX;
                //设置big的top值
                oBig.style.top = event.clientY + 20 + "px";
                //设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
                oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

            };
            //鼠标离开, 删除大图并隐藏大图容器
            aLi[i].onmouseout = function() {
                this.className = "";
                oBig.style.display = "none";
                //移除大图片
                oBig.removeChild(oBig.lastChild)
            }
        }
    };
    </script>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="../../../src/images/shirt_1.jpg" /></li>
            <li><img src="../../../src/images/shirt_2.jpg" /></li>
            <li><img src="../../../src/images/shirt_3.jpg" /></li>
            <li><img src="../../../src/images/shirt_4.jpg" /></li>
        </ul>
    </div>
    <div id="big">
        <div></div>
    </div>
</body>

</html>
